<template>
  <div>
    <div class="mui-card" v-for="(item,i) in goodslist" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <van-switch
            v-model="$store.getters.getSelected[item.id]"
            @change="changeSelect(item.id,$store.getters.getSelected[item.id])"
          />
          <p>{{item.title}}</p>
          <div class="box">
            <div class="shanchu">
              <img :src="item.thumb_path">
              <span class="price">{{item.sell_price}}</span>
              <van-stepper v-model="$store.getters.getCount[item.id]" @change="changeCount(item.id,$store.getters.getCount[item.id])" :max="10"/>
              <van-button round type="danger" @click="delgoods(item.id,i)">删除</van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getGoodsList } from "@/api/";
export default {
  data() {
    return {
      checked: true,
      car: this.$store.state.car,
      goodslist: []
    };
  },
  methods: {
    changeSelect(id, select) {
      this.$store.commit("changeSelect", { id: id, selected: select });
    },
    changeCount(id,count){
        this.$store.commit("changeCount",{id:id,count:count})
    },
    delgoods(id,i){
        this.goodslist.splice(i,1)
        this.$store.commit("delgoods",id)
    }
  },
  created() {
    console.log(this.car, this.$store.getters.getSelected);
    let allId = [];
    this.car.forEach(item => {
      allId.push(item.id);
    });
    getGoodsList(allId.join(",")).then(res => {
      this.goodslist = res.data.message;
      console.log(res);
    });
  }
};
</script>
<style lang="less" scoped>
/deep/input {
  width: 30px;
  height: 20px;
}

.van-switch {
  float: left;
  margin-right: 10px
}
.box {
  img {
    display: inline-block;
    width: 90px;
    height: 90px;
  }
}
p{
    height: 40px;
    margin: 0 5px;
}
.shanchu {
  display: flex;
  flex-wrap:wrap;
}
.price{
    color:red;
}
</style>
